<template>
	<div>
		<div class="tableNavBox">
			<formTemplate :formSet="formSet1" :postData="formData1" :optionData="optionData">
				<template slot="baseLocation" slot-scope="scope">
					<el-form-item label="基地位置：" style="width:500px">
						<el-select v-model="formData1.baseId" @change="baseLocationChange" style="width:500px" placeholder="请选择">
						    <el-option
						      v-for="item in baseData"
						      :key="item.id"
						      :label="item.baseLocation"
						      :value="item.id">
						    </el-option>
						  </el-select>
						 <!-- <img style="float: right;" src="@/assets/image/digitalOrchard/dingwei.png"
						  alt="" class="locationBtn" @click="flyingFigure"/> -->
					</el-form-item>
				</template>
				<template slot="baseName" slot-scope="scope">
					<el-form-item label="客户：" >
						<el-select
  						  	v-model="formData1.baseName"
  						  	filterable
  						  	remote
  						  	reserve-keyword
  						  	placeholder="请输入公司名称"
  						  	:remote-method="getCompaniesByKey"
  						  	:loading="loading"
							style="width:500px"
							@change="handleChange">
  						  	<el-option
  						  	  v-for="(item,index) in optionData.supplierId"
  						  	  :key="index"
  						  	  :label="item.name"
  						  	  :value="item.value">
  						  	</el-option>
  						</el-select>
					</el-form-item>
            	</template>
			</formTemplate>
			<tableForm :pageData="formData1.pageData" :data="tableSet" title="物联网装备列表" :addNew="false">
				<template slot="addbtn">
					<el-button  round size="mini" type="primary" @click="add">新增</el-button>	
				</template>
				<template slot="switchStatus" slot-scope="scope">
					{{ scope.row.row.switchStatus == 1?'关闭':'开启' }}
					<!-- <el-button  round size="mini" type="primary" @click="add">新增</el-button>	 -->
				</template>
			    <template slot="g" slot-scope="scope">
			    	<el-button type="text" size=" " style="color:#24B14E" @click="set(scope.row)">参数配置</el-button>	
			    	<el-button type="text" size=" " style="color:red" @click="del(scope.row)">删除</el-button>
                </template>
			</tableForm>
			<pagina-tion :totalNum="formData1.pageData.totalNum" @paginaClick="paginaClick"></pagina-tion>
			<div style="clear:both"></div>
		</div>
		
	</div>
</template>

<script>
    import formTemplate from '@/components/form.vue'
	import tableForm from '@/components/tableForm.vue'
	export default {
		components: {
            formTemplate,
			tableForm
		},
		data() {
			return {
                formSet1:[
                    { span: 13, label: '客户名称：', prop: 'baseName', type: 'select' ,labelWidth:'500px' },
                    { span: 13, label: '基地名称：', prop: 'baseLocation', type: 'select' ,labelWidth:'500px'},
                ],
				tableSet:[
                    {type:'slot',prop:'switchStatus',label:'装备编号'},
                    {type:'text',prop:'number',label:'物联网装备型号'},
                    {type:'text',prop:'createDate',label:'供应商'},
                    {type:'text',prop:'equipName',label:'装备名称'},
                    {type:'text',prop:'serialNumber',label:'模块作用描述'},
                    {type:'text',prop:'idNumber',label:'信号状态'},
                    {type:'slot',label: '操作', prop:'g'},
                ],
				optionData:{
					baseName:[],
					supplierId:[],
				},
                formData1:{
					pageData:{
						items:[],
					},
					baseLocation: '',
					baseId: ''// 选中的基地
				},
				companyId: this.$store.state.company.companyId,
				companyName: this.$store.state.company.companyName,
				userId: '',
				mistiming: '0', // 所选时间的差值
				uploadLoading: false,
				postData: {
				},
				loading:false,
				baseData: '' ,// 拿到的基地数据
				// 选中的基地坐标
				baseLatLng: {
					lat: '',
					lng: ''
				},
				pageNum: 1
			}
		},
		created() {
			this.$store.commit('industrialis_leftNavIndex', 21)
			// this.getQueryList()
		},
		mounted() {
			
		},
		watch: {
		},
		methods: {
			paginaClick(val){
				this.pageNum = val
				this.getInternetList()
			},
			add(){
				if (this.formData1.baseName) {
					let client = this.formData1.baseName
					let baseId = this.formData1.baseId
					let baseLocation = this.formData1.baseLocation
					let clientName = this.formData1.clientName
					this.$router.push(`/IntelligentEquipment/working/digitalAdd?client=${client}&base=${baseId}&clientName=${clientName}&baseLocation=${baseLocation}`)
				} else{
					this.$message.error('请先选择客户')
				}
			},
			set(row){
				console.log(row.row.id)
				let id = row.row.id
				let client = this.formData1.baseName
				let baseId = this.formData1.baseId
				let baseLocation = this.formData1.baseLocation
				let clientName = this.formData1.clientName
				this.$router.push(`/IntelligentEquipment/working/digitalAdd?client=${client}&base=${baseId}&clientName=${clientName}&baseLocation=${baseLocation}&internetId=${id}`)
			},
			del(row){
				// console.log(row.row)
				this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$request.get(this.$napi.removeInternet, {
						id: row.row.id
					}).then(res=>{
						if(res.code == 200){
							this.$message.success('删除成功')
							if(this.pageNum > 1){
								this.pageNum = $globalData.residue(this.formData1.pageData.totalNum)
							}
							this.getInternetList()
						}
					})
				})
			},
			getCompaniesByKey(e){
				this.$request.postForm(this.$api.getCompaniesByKey, {
					keyWord:e
				}).then(res=>{
					if(res.code == 200){
						this.optionData.supplierId = res.data.map(item =>{
							return{
								name:item.supplierName,
								value:item.supplierId,
								createUserId:item.createUserId,
								createUserName:item.createUserName
							}
						})
					}
				})
			},
			handleChange(e){
				// console.log(this.optionData.supplierId);
				this.optionData.supplierId.forEach(item =>{
					if(item.value == e){
						this.formData1.createUserName = item.createUserName
						this.formData1.createUserId = item.createUserId
						this.formData1.clientName = item.name
						this.getClientBase(e)
						
					}
				})
			},
			// 获取客户的基地列表
			getClientBase(e){
				this.$request.get(this.$napi.queryBaseList, {companyId: e}).then(res=>{
					if(res.code == 200){
						// 选择客户之后，初始化赋值
						this.baseData = res.data
						this.formData1.baseId = this.baseData[0].id
						this.formData1.baseLocation = this.baseData[0].baseLocation
						this.formData1.area = this.baseData[0].area
						this.formData1.colorRail = this.baseData[0].colorRail
						this.baseLatLng.lat = this.baseData[0].latitude
						this.baseLatLng.lng = this.baseData[0].longitude
						this.getInternetList()
					}
				})
			},
			// 获取基地物联网列表
			getInternetList(id){
				this.$request.get(this.$napi.queryInternetList, {
					id: id,
					baseId: this.formData1.baseId,
					page: this.pageNum,
					pageSize: $globalData.pageSize
				}).then(res=>{
					if(res.code == 200){
						console.log(res.data)
						this.formData1.pageData = res.data
					}
				})
			},
			// 基地选中后数据赋值
			baseLocationChange(e){
				this.formData1.baseId = e
				this.baseData.some(item => {
					if(item.id == e){
						console.log(item)
						this.formData1.area = item.area
						this.formData1.colorRail = item.colorRail
						this.baseLatLng.lat = item.latitude
						this.baseLatLng.lng = item.longitude
					}
				})
			},
			getQueryList(){
				if(this.$store.state.company.companyId){
					this.$request.postForm(this.$api.queryList, {
					companyId: this.companyId,
					page:this.page,
					pageSize:this.pageSize
					}).then(res=>{
						if(res.code == 200){
							this.optionData.baseName = res.data.items.map(item =>{
								return{
									name:item.baseName,
									value:item.id,
									baseLocation:item.baseLocation
								}
							})
						}
					})
				}
				
			},
		}
	}
</script>

<style scoped="scoped">
	.breadcrumb,
	.tableNavBox {
		margin-top: 20px;
	}

	.flex{
		display: flex;
		justify-content: space-between;
	}

	.breadcrumb >>>span{
		color: #23B14D;
		cursor: pointer;
	}

	.checkBox{
		display: flex;
		justify-content: flex-start;
		padding-left: 20px;
	}

	.tableNavBox {
		padding-top: 0;
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 20px;
		/* margin-top: 20px; */
	}

	.topButton {
		width: 78px;
	}

	.dialogVisible>>>.el-input__inner {
		width: 270px;
	}

	.demo-form-inline {
		color: #5C5C5C;
		
	}

	.formInput {
		width: 500px;
	}

	.formInputNub {
		width: 100px;
		margin-right: 10px;
	}

	.formInputDatePicker {
		width: 440px;
		margin-right: 10px;
	}

	.fileListName {
		width: 500px;
		padding: 0 30px 0 10px;
		position: relative;
		border: 1px solid #DCDCDC;
		margin-bottom: 15px;
		align-items: center;
		color: #5C5C5C;
		border-radius: 5px;
	}

	.fileListNameIcon {
		position: absolute;
		right: 10px;
		cursor: pointer;
		top: 10px;
	}

	.fileListNameIcon:hover,
	.dayNub {
		color: #23B14D;
	}

	.dayNub {
		margin: 0 5px;
	}

	.btnBox {
		width: 100%;
		margin-top: 30px;
		padding: 30px 0;
		border-top: 1px solid #DCDCDC;
		text-align: center;
	}

	.btnBox button {
		width: 100px;
	}
	.expertTag{
		margin-right: 10px;
		margin-bottom: 10px;
	}
	.locationBtn{
		width: 18px;height: 18px;position: absolute;top: 7px;cursor: pointer;right: -90px;
	}
</style>
